<template>
   <div id="login">
      <div class="login-container">
        <div class="login-title">
            <h2>OA <em>v 1.0</em></h2>
        </div>
        <div class="login-content">
          <mt-field label="" placeholder="请输入用户名" v-model="authRequest.username"></mt-field>
          <mt-field label="" placeholder="请输入密码" type="password" v-model="authRequest.password"></mt-field>
        </div>

        <div class="login-foot">
          <mt-button type="primary" size="large" icon="login" @click.native="handleLogin">登录</mt-button>
        </div>
      </div>
     <div class="beian">
       <a  href="http://www.miitbeian.gov.cn/">苏ICP备14035475号</a>
     </div>
   </div>
</template>

<script>
  import { Indicator } from 'mint-ui';
  import { Toast } from 'mint-ui';
  import fetch from '../utils/fetch'
  export default {
     data(){
        return {
          authRequest:{
            username:'',
            password:'',
            loginMethod:'BY_USERNAME',
            verifyCode:'888888',
            inviteCode:'888888'
          }
        }
     },
     methods:{
       handleLogin: function () {
         if (this.authRequest.username.trim().length === 0 ){
           this.tips('请输入用户名')
           return;
         }
         if (this.authRequest.password.trim().length === 0) {
           this.tips('请输入密码')
           return;
         }
         Indicator.open({
           text: '登录中...',
           spinnerType: 'fading-circle'
         });
         let formData = JSON.stringify(this.authRequest)
          fetch.post('/api/auth/login', formData).then(response => {
            Indicator.close()
            if (response.data.success) {
              this.$store.dispatch('initSid', response.data.response.sid)
              this.$router.replace({path: '/home'})
            } else {
              this.tips(response.data.msg)
            }
          })
       },
       tips(message) {
         Toast({
           message: message,
           position: 'bottom',
           duration: 5000
         })
       }
     },
     mounted(){


     },
     computed:{

     },

  }
</script>

<style scoped lang="scss">
@import '../base/css/base.scss';
  #login {
    height: 100%;
    width: 100%;
    position: fixed;
    background: url("../assets/login_bg.png") no-repeat center/cover;
    .login-container {
      position: relative;
      padding: 65% 0 0;
      color: #fff;
      input {
        border: none;
      }
      .login-title {
        height: 1rem;
        line-height: 1rem;
        position: relative;
        text-align: center;
        letter-spacing: 0.028rem;
        @include fz(15px);
        em {
          @include fz(5px);
        }
        color: #bbbec4;
      }
      .login-content {
        background: #fff;
        width: 75%;
        margin: 30px auto;
        border-radius: 10px;
        padding: 0 15px;
      }
      .login-foot {
        width: 83%;
        margin: 0 auto;
      }
    }
  }

.mint-button{
  height: 51px;
}
  .beian{
    text-align: center;
    position: fixed;
    width: 100%;
    bottom: 10px;
    text-align: center;
    a{
      color: #fff;
      font-size: 12px;
    }
  }


  .login-container{
    padding: 20%;
  }
</style>
